<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /*
          * 闭包的模式:函数模式的闭包,对象模式的闭包
          * 闭包的作用:缓存数据,延长作用域链
          * 闭包的优点和缺点:缓存数据
          *
          * 闭包的应用
          *
          *
          * */
        console.log("---------------函数模式闭包-----------------");

        //普通的函数
        function f1() {
            var num = 10;
            num++;
            return num;
        }
        console.log(f1());
        console.log(f1());
        console.log(f1());

        console.log("----------------------------------");

        //函数模式的闭包
        function f2() {
            var num = 10;
            return function () {
                num++;
                return num;
            }
        }
        var ff = f2();
        console.log(ff());//11
        console.log(ff());//12
        console.log(ff());//13

        console.log("----------------------------------");
        console.log(f2()()) //11
        console.log(f2()()) //11
        console.log(f2()()) //11



        //对象模式的闭包:函数中有一个对象

        console.log("---------------对象模式闭包-----------------");

        function f3() {
            var num = 10;
            return obj = {
                getNum: function () {
                    num++;
                    return num;
                }
            };
        }
        console.log(f3().getNum());
        console.log(f3().getNum());
        console.log(f3().getNum());
        
        console.log("----------------------------------");
        var objet = f3();
        console.log(objet.getNum());
        console.log(objet.getNum());
        console.log(objet.getNum());   
    </script>
</body>

</html>